<template>
  <div>
    <el-dialog :visible.sync="coSelectVisible" :append-to-body="true">
      <div class="org-pub-dialog">
        <div class="panelWrap">
          <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
            <div>机构查询</div>
            <i class="el-icon-close" @click="handleCloseDialogUpdate" />
          </div>
        </div>
        <div class="flex">
          <div class="panelWrap tree-grow wrap">
            <div class="title flex flexac fs14 cfff fwb pl p-r-20">
              <div>机构菜单</div>
            </div>
            <div class="sysTree">
              <el-tree
                ref="tree1"
                class="left-tree coTree"
                :current-node-key="0"
                :data="setTree"
                :props="defaultProps"
                :node-key="NODE_KEY"
                :default-expanded-keys="[1]"
                :show-checkbox="true"
                :highlight-current="true"
                :default-checked-keys="checked"
                @node-click="handleNodeClick"
              />
            </div>
          </div>
          <div class="panelWrap org-wrap wrap">
            <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
              <div>机构列表</div>
              <!-- <i class="el-icon-close" @click="handleCloseDialogUpdate" /> -->
            </div>
            <div class="coSelect-dialog m-t-20 m-b-20">
              <div class="flex flexac m-l-15">
                <el-input v-model="param.name" class="co-input m-l-10" placeholder="请输入机构名称" @keyup.enter.native="getOrg" @input="handleSearch" />
                <el-button class="searchBtn co-btn flex flexac m-l-20 m-r-10" size="small" type="warning" @click="getOrg"><i class="co-i" /><span class="search1">查 询</span></el-button>
                <el-button class="se-btn saveBtn m-l-10 el-icon-success" @click="handleSelectSave">选 中</el-button>
              </div>
              <el-table
                ref="multipleTable"
                class="m-t-30 con-table m-b-25"
                type="expand"
                :data="dataList"
                highlight-current-row
                @select-all="handleCheck"
                @select="handleCheck"
                @selection-change="handleCheckChange"
                @row-dblclick="dbSelected"
              >
                <el-table-column type="selection" align="center" width="55" height="40" />
                <template v-for="item in tablehead">
                  <el-table-column :key="item.index" :width="item.width" align="center" :prop="item.prop" :label="item.label" />
                </template>
              </el-table>
            </div>
            <el-pagination
              class="paginationWrap co-page flex m-l-10"
              :current-page="paging.currentPage"
              :page-sizes="[4]"
              :page-size="paging.pageSize"
              :pager-count="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findOrgList, findOrgDetail } from '@/api/baseInfo/authority/org'

import { showNotice, transData } from '@/utils/toolclass'

export default {
  name: 'CoSelect',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    queryParam: {
      type: Object,
      default: () => ({
        companyId: '',
        name: ''
      })
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      row: {},
      coSelectVisible: false,
      dataList: [],
      paging: {
        currentPage: 1,
        pageSize: 4,
        pageSizeArr: [4],
        total: 0
      },
      param: {
        id: '',
        name: ''
      },
      tablehead: [
        {
          index: 0,
          prop: 'parentId',
          label: '父级ID',
          width: '80',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'id',
          label: '机构ID',
          width: '80',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'name',
          label: '机构名称',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'nameSimple',
          label: '机构简称',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ],
      setTree: [],
      checked: [],
      NODE_KEY: 'id', // id对应字段
      MAX_LEVEL: 3, // 设定最大层级
      NODE_ID_START: 0, // 新增节点id，逐次递减
      startId: null,
      defaultProps: {// 默认设置
        children: 'children',
        label: 'name'
      },
      initParam: {// 新增参数
        name: '新增节点',
        parentId: 1
        // children: []
      },
      currentNode: {}
    }
  },
  computed: {},
  watch: {
    coSelectVisible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.coSelectVisible = v
    }
  },
  mounted() {
    this.getSelectList()
    this.getTreeMenuList()
  },
  methods: {
    handleNodeClick(res) {
      this.currentNode = res
      // console.log(res)
      this.getMenuDetail(res.id)
    },
    getMenuDetail(id) {
      this.dataList = []
      findOrgDetail(id).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.dataList.push(res.data)
        }
      })
    },
    // 单选操作，全选按钮失效操作
    handleCheck(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },

    // 取消单选的checkbox
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    dbSelected(row) {
      this.$emit('update', row)
      // showNotice('success', '提示', '保存成功!')
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
      this.coSelectVisible = false
    },
    handleSelectSave() {
      if (!this.selectioned) {
        showNotice('error', '提示', '请选择公司')
      } else {
        this.$emit('update', this.row)
        this.$emit('handleRefresh')
        this.$emit('handleCloseDialog')
        this.coSelectVisible = false
      }
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSelectList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getSelectList()
    },
    // 模糊查询
    getOrg() {
      findOrgList(this.param.id, this.param.name, this.paging.currentPage, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          this.dataList = res.data.filter(item => {
            if (item.name.toLowerCase().indexOf(this.queryParam.name) > -1) {
              return this.dataList.push(item)
            }
          })
          this.handleSearch(this.dataList)
          // showNotice('success', '提示', '查询成功')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleSearch(name) {
      if (this.param.name === '') {
        this.getSelectList()
      }
    },
    getSelectList() {
      findOrgList(this.param.id, this.param.name, this.paging.currentPage, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.dataList = res.data ? res.data : []
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    getTreeMenuList() {
      findOrgList(this.param.id, this.param.name, this.paging.currentPage, 200).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          this.setTree = transData(res.data, 'id', 'parentId')
        }
      })
    },
    handleCloseDialogUpdate() {
      this.coSelectVisible = false
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/public.scss';

.org-pub-dialog {
  width: 1000px;
  height: 600px;
  background: #ffffff;
  margin-left: -200px;
  border-radius: 5px;
  .org-wrap {
    flex: 1;
    margin: 20px;
    .el-icon-success:before {
      margin-right: 4px;
      margin-left: -6px;
    }
    .se-btn {
      width: 80px;
      height: 40px;
    }
  }
  .tree-grow {
    width: 260px;
    height: 520px;
    margin: 20px;
    .sysTree {
      height: 470px;
      overflow: auto;
    }
  }
}

</style>
